<!-- 
<body>
 -->
<html>

<head>
    <meta charset='utf-8' />
    <style>
        #map {
            margin: 0 auto;
            width: 100%;
            height: 100%
        }

        html,
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="./js_thematic_map_example/script/jq/jquery.min.js"></script>
    <script src="./js_thematic_map_example/script/include-mapboxgl.js"></script>
    <script src="./js_example/script/script/utils/echarts.min.js"></script>
    <script src="./js_example/script/script/utils/echarts-gl.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('map'));

        $.getJSON('./js_thematic_map_example/data/ShanghaiBuildingPrice.json', function (linedata) {

            mapboxgl.accessToken = 'pk.eyJ1IjoiaXRjeiIsImEiOiJjanh6ZnZnODkwMmpqM2RwZGV1cmRhYXVlIn0.RiMTs8IAFa8Dp0JXnqnjcQ';
            myChart.setOption({

                visualMap: {
                    show: false,
                    calculable: true,
                    realtime: false,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    outOfRange: {
                        colorAlpha: 0
                    },
                    max: linedata[1]
                },
                toolBox: {
                    feature: {
                        dataZoom: {
                            show: true,
                        }
                    }
                },
                mapbox: {
                    center: [121.4693, 31.123070],
                    zoom: 10,
                    pitch: 50,
                    bearing: -10,
                    style: style,
                    boxHeight: 50,
                    // altitudeScale: 3e2,
                    postEffect: {
                        enable: true,
                        SSAO: {
                            enable: true,
                            radius: 2,
                            intensity: 1.5
                        }
                    },
                    light: {
                        main: {
                            intensity: 1,
                            shadow: true,
                            shadowQuality: 'high'
                        },
                        ambient: {
                            intensity: 0.
                        },
                        ambientCubemap: {
                            texture: './js_thematic_map_example/data/ShanghaiBuildingPrice.hdr',
                            exposure: 1,
                            diffuseIntensity: 0.5
                        }
                    },

                },

                series: [{
                    type: 'bar3D',
                    roam: true,
                    shading: 'realistic',
                    coordinateSystem: 'mapbox',
                    barSize: 0.2,
                    silent: true,
                    data: linedata[0]
                }]
            });
            //获取mapbox对象
            var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
            mapbox.addControl(new mapboxgl.NavigationControl(), 'bottom-right');

        });

    </script>
</body>

</html>